import { ref, toRefs, toRaw, watch, onBeforeUnmount } from "vue"
import { customizeHttp } from "../api/http"
import { useChartDataPondFetch } from "./useChartDataPondFetch"
import { newFunctionHandle, intervalUnitHandle } from "../utils/index.js"

/**
 * setdata 数据监听与更改
 * @param targetComponent
 * @param useChartEditStore 若直接引会报错，只能动态传递
 * @param vars 变量列表
 * @param updateCallback 自定义更新函数
 */
export const useValueData = (targetComponent, store, updateCallback) => {
  const vChartRef = ref(null)
  let dataValue = ref("")
  let fetchInterval
  // 数据池
  useChartDataPondFetch()
  const requestIntervalFn = () => {
    let requestGlobalConfig = store.state.chartEditStore.requestGlobalConfig
    // 全局数据
    const {
      requestOriginUrl,
      requestIntervalUnit: globalUnit,
      requestInterval: globalRequestInterval,
    } = toRefs(requestGlobalConfig)

    // 目标组件
    const {
      requestDataType,
      requestUrl,
      requestIntervalUnit: targetUnit,
      requestInterval: targetInterval,
    } = toRefs(targetComponent.request)

    // 非请求类型
    if (requestDataType.value !== "ajax") return

    try {
      // 处理地址
      // @ts-ignore
      if (requestUrl?.value) {
        // requestOriginUrl 允许为空
        const completePath =
          requestOriginUrl.value && requestOriginUrl.value + requestUrl.value
        if (!completePath) return

        clearInterval(fetchInterval)

        const fetchFn = async () => {
          const res = await customizeHttp(
            toRaw(targetComponent.request),
            toRaw(requestGlobalConfig)
          )
          if (res) {
            try {
              const filter = targetComponent.filter
              const { data } = res
              dataValue.value = data
            } catch (error) {
              console.error(error)
            }
          }
        }

        // 普通初始化与组件交互处理监听
        watch(
          () => targetComponent.request.requestParams,
          () => {
            fetchFn()
          },
          {
            immediate: false,
            deep: true,
          }
        )

        // 定时时间
        const time =
          targetInterval.value && targetInterval.value
            ? targetInterval.value
            : globalRequestInterval.value
        // 单位
        const unit =
          targetInterval.value && targetInterval.value
            ? targetUnit.value
            : globalUnit.value
        // 开启轮询
        if (time) {
          fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
        } else {
          fetchFn()
        }
      }
      // eslint-disable-next-line no-empty
    } catch (error) {
      console.log(error)
    }
  }
  // watch(
  //   () => targetComponent.funcConfig.request,
  //   val => {
  //     if (val) {
  //       requestIntervalFn()
  //     }
  //   },
  //   {
  //     immediate: true,
  //   }
  // )
  requestIntervalFn()
  onBeforeUnmount(() => {
    fetchInterval && clearInterval(fetchInterval)
  })
  return { vChartRef, dataValue }
}
